<template>
  <div class="app-container">
    <div class="py-10 fw-7">请设置支持的物流方式</div>
    <div>
      <div v-for="(item,index) in logisticList" :key="index">
        <div class="disFlxJS py-10 borderB" @click="item.collapseShow = !item.collapseShow">
          <el-checkbox v-model="item.checked" @change="(status)=> changeChecked(status, item)">{{ item.title }}</el-checkbox>
          <i v-if="item.logisticType === 0 || item.logisticType === 3" class="iconfont el-icon-arrow-right" />
          <div v-else></div>
        </div>
        <CollapseTransition v-if="item.logisticType === 0 || item.logisticType === 3">
          <div
            v-show="item.collapseShow"
            class="disFlxAC fz-14 pl-40"
            style="background-color: #f5f5f5;line-height: 50px;height: 50px;"
          >
            <div>{{ item.logisticType === '3' ? '运费' : '全国统一运费' }}</div>
            <el-input-number
              v-model="item.logisticPrice"
              :controls="false"
              size="mini"
              style="width: 80px; margin-left: 10px"
            ></el-input-number>
            <div class="ml-2">元</div>
          </div>
        </CollapseTransition>
      </div>
    </div>
    <FixedBottomButton>
      <el-button
        type="primary"
        size="medium"
        style="padding-left: 50px; padding-right: 50px"
        @click="setData"
        >保 存</el-button
      >
    </FixedBottomButton>
  </div>
</template>

<script>
import CollapseTransition from "element-ui/lib/transitions/collapse-transition";
import { getLogisticSet, updateLogisticSet } from "@/api/logistics";
import FixedBottomButton from '@/components/FixedBottomButton'

export default {
  name: "LogisticsSet",
  components: {
    CollapseTransition,
    FixedBottomButton
  },
  data() {
    return {
      logisticList: [
        {
          title: '快递',
          logisticType: 0,
          logisticPrice: 0,
          checked: false,
          collapseShow: false
        },
        {
          title: '用户自提',
          logisticType: 1,
          logisticPrice: 0,
          checked: false,
          collapseShow: false
        },
        {
          title: '无需物流',
          logisticType: 2,
          logisticPrice: 0,
          checked: false,
          collapseShow: false
        },
        {
          title: '同城配送',
          logisticType: 3,
          logisticPrice: 0,
          checked: false,
          collapseShow: false
        }
      ]
    };
  },
  created() {
    this.getData();
  },
  activated() {
    this.getData();
  },
  methods: {
    getData() {
      getLogisticSet().then((res) => {
        if(res.data && res.data.length){
          res.data.forEach(v => {
            this.logisticList.forEach(item => {
              if(v.logisticType === item.logisticType){
                item.logisticPrice = v.logisticPrice;
                item.checked = true;
                item.collapseShow = true;
                this.$set(item, 'id', v.id);
                this.$set(item, 'companyId', v.companyId);
                this.$set(item, 'deptId', v.deptId);
              }
            })
          });
        }
      });
    },
    setData() {
      const _list = this.logisticList.filter(v=> v.checked);
      updateLogisticSet({logisticList: _list}).then(res=>{
        this.$message.success('设置成功');
        this.getData();
      })
    },
    changeChecked(status, item){
      if(status && (item.logisticType === 0 || item.logisticType === 3)){
        item.collapseShow = true
      }
    }
  },
};
</script>

<style lang="scss" scoped></style>
